<template>
  <el-dialog
    v-model="dialogShow"
    :close-on-click-modal="false"
    custom-class="mydialog"
    width="40%"
    :title="title"
    @closed="close"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :label-width="formLabelWidth"
      size="small"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item
            label="组成结构"
            prop="expr"
          >
<!--            <el-input-->
<!--              v-model="form.expr"-->
<!--              clearable-->
<!--              placeholder="请输入组成结构"-->
<!--              autocomplete="off"-->
<!--            />-->
            <span>{{formData.expr}}</span>
          </el-form-item>

          <el-form-item
                  label="常量"
                  prop="str"
          >
            <el-input
                    @blur="onBlur"
                    v-model="formData.str"
                    placeholder="请输入常量"
            />
          </el-form-item>

          <el-form-item
                  label="日期"
                  prop="expr"
          >
            <el-select
                    v-model="formData.date"
                    style="width: 100%"
                    placeholder="请选择日期"
                    clearable
                    @change="changeSelect"
            >
              <el-option
                      v-for="item in condation4"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item
                  v-if="formData.date"
                  label="重置"
                  prop="expr"
          >
            <el-radio style="height: 32px" v-model="formData.radio" label="Y" size="large" @change="radioChange">按年重置</el-radio>
            <el-radio style="height: 32px" v-model="formData.radio" label="M" size="large" @change="radioChange">按月重置</el-radio>
            <el-radio style="height: 32px" v-model="formData.radio" label="D" size="large" @change="radioChange">按日重置</el-radio>
          </el-form-item>

          <el-form-item
            label="流水号规则条件"
            prop="condation"
          >
            <el-select
              v-model="formData.condation"
              style="width: 100%"
              placeholder="动态参数"
              clearable
              multiple
              @change="changeSelect"
            >
              <el-option
                v-for="item in condations"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="流水号位数:"
            prop="num"
          >
            <el-input
              v-model.number="formData.num"
              type="number"
              placeholder="请输入流水号"
              step="1"
              min="1"
              @blur="onBlur"
              onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
            />
          </el-form-item>
          <el-form-item
            label="开始值:"
            prop="start"
          >
            <el-input
                    v-model="formData.start"
                    placeholder="请输入开始值"
                    @blur="onBlur"
                    onkeyup="this.value= this.value.match(/^[1-9]{1}[0-9]*$/)"
            />
          </el-form-item>
          <el-form-item
            label="增量:"
            prop="add"
          >
            <el-input
                    v-model="formData.add"
                    placeholder="请输入增量"
                    @blur="onBlur"
                    onkeyup="this.value= this.value.match(/^[1-9]{1}[0-9]*$/)"
            />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          class="border-btn"
          size="small"
          @click="close"
        >取消</el-button>
        <el-button
          class="main-btn"
          size="small"
          type="primary"
          @click="confirm"
        >保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import area from '@/utils/area.js'
import {defineComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs,} from 'vue'
import {crmStore} from '@CRM/store'

export default defineComponent({
  name: 'CreateOrChange',
  props: {
    title: {
      type: String,
      default: '',
    },
    form: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    var formRef = ref(null)
    const citys = area
    const condation1 =
      crmStore.getters['dictionary/getDictionary']['code:rule:const']
    const condation2 =
      crmStore.getters['dictionary/getDictionary']['code:rule:p']
    const condation3 =
      crmStore.getters['dictionary/getDictionary']['rule:code:reset']
    const condation4 =
      crmStore.getters['dictionary/getDictionary']['rule:code:date']
    const condations = condation1
      .concat(condation2)

    const changeSelect = (val) => {
      checkRule()
    }
    var data = reactive({
      formData:{
        str:'',
        radio:'Y',
        date:'',
        expr: '',
        condation: [],
        num: '5',
        start: 1,
        add: 1,
      },
      datas:{}
    })
    var rules = reactive({
      str: [{ required: true, message: '请输入常量', trigger: 'blur' }],
      num: [{ required: true, message: '请输入流水号', trigger: 'blur' }],
      start: [{ required: true, message: '请输入开始值', trigger: 'blur' }],
      add: [{ required: true, message: '请输入增量', trigger: 'blur' }],
    })

    var formLabelWidth = ref(120)
    var dialogShow = ref(false)

    const radioChange = (val) => {
      checkRule()
    }

    const onBlur = (val) => {
      if (val == 0){
        val = 1
      }
      checkRule()
    }

    const checkRule = () => {
      let string = ''
      let string1 = ''
      let string2 = ''
      let string3 = ''
      let string4 = ''
      if (data.formData.str){
        string = '$[' + data.formData.str +']'
      }
      if (data.formData.date){
        let index = condation4.findIndex(a=>a.value == data.formData.date)
        string1 = 'D[' + condation4[index].label + ']'

        string4 = 'M[' + data.formData.radio + ']'
      }

      if (data.formData.condation){
        data.formData.condation.forEach((item) => {
          condation1.forEach((itm) => {
            if (item == itm.value) {
              if (!string3) {
                string3 = string3 + 'P[' + itm.value + ']'
              }else {
                string3 = string3 + '[' + itm.value + ']'
              }
            }
          })
          condation2.forEach((itm) => {
            if (item == itm.value) {
              if (!string3) {
                string3 = string3 + 'P[' + itm.value + ']'
              }else {
                string3 = string3 + '[' + itm.value + ']'
              }
            }
          })
          condation3.forEach((itm) => {
            if (item == itm.value) {
              if (!string3) {
                string3 = string3 + 'P[' + itm.value + ']'
              }else {
                string3 = string3 + '[' + itm.value + ']'
              }
            }
          })
        })
      }

      let expr1 = string + ':'
      if (string1){
        expr1 = expr1 + string1 + ':'
      }
      if (string2){
        expr1 = expr1 + string2 + ':'
      }
      if (string3){
        expr1 = expr1 + string3 + ':'
      }
      expr1 = expr1 + '&[-]' + ':' + 'I' + '[' + data.formData.num + ']' + 'S' + '[' + data.formData.start + ']' + 'A' + '[' + data.formData.add + ']'
      if (string4){
        expr1 = expr1 + ':' + string4
      }
      data.formData.expr = expr1
    }

    const open = (val) => {
      console.log(val)
      data.formData = {
        str:'',
        radio:'Y',
        date:'',
        expr: '',
        condation: [],
        num: '5',
        start: 1,
        add: 1,
      }
      data.datas = val
      if (val.form) {
        data.formData = JSON.parse(val.form)
        checkRule()
      }

      dialogShow.value = true
    }
    const close = () => {
      dialogShow.value = false

      formRef.value.clearValidate()
      // formRef.value.resetFields()
    }
    const confirm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          let a = {...data.datas}
          a.expr = data.formData.expr
          a.form = JSON.stringify(data.formData)
          // const data = {
          //   expr: expr,
          //   genType: form.genType,
          //   redisKey: form.redisKey,
          //   seqType: form.seqType,
          //   form: JSON.stringify(data.formData),
          // }
          api.system.CODEROLE_UPDATE(a).then((res) => {
            if (res.code == 0) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '更新成功',
              })
              dialogShow.value = false
              context.emit('success')
              close()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    onMounted(() => {

    })
    return {
      ...toRefs(data),
      condation1,
      condation2,
      condation3,
      condation4,
      condations,
      citys,
      formRef,
      rules,
      confirm,
      formLabelWidth,
      dialogShow,
      open,
      close,
      radioChange,
      onBlur,
      changeSelect,
    }
  },
})
</script>
